<template>
  <div class="main-chartFour ">
    <div class="txt_btm" :id="id"></div>
    <select name="" id="mySelect2" v-model="value" @change="handleSelectChange">
      <option value="0">供水</option>
      <option value="1">热力</option>
      <option value="2">污水</option>
      <option value="3">雨水</option>
    </select>
  </div>
</template>

<script>
import * as echarts from "echarts";
import jsonData1 from '@/assets/config/ZY_JSLINE.json'
import jsonData2 from '@/assets/config/ZY_RLLINE.json'
import jsonData3 from '@/assets/config/ZY_WSLINE.json'
import jsonData4 from '@/assets/config/ZY_YSLINE.json'

export default {
  name: "chartFour",
  components: {},
  props: ['id'],
  data() {
    return {
      value: 1
    };
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      if (jsonData2.features && jsonData2.features.length > 0) {
        // 创建一个对象来存储每种材质的数量
        var materialCounts = {};
        // 遍历数据，统计每种材质的数量
        jsonData4.features.forEach(item => {
          var material = item.properties['材质'];
          if (material in materialCounts) {
            materialCounts[material]++;
          } else {
            materialCounts[material] = 1;
          }
        });
        // 将统计结果转换成ECharts需要的数据格式
        var echartsData = Object.keys(materialCounts).map(material => ({
          value: materialCounts[material],
          name: material
        }));
        // 初始化ECharts实例
        var myChart = echarts.init(document.querySelector("#echarts_4"));
        // 指定图表的配置项和数据
        var option = {
          tooltip: {
            trigger: 'item',
            textStyle: {
              color: 'white'
            }
          },
          series: [
            {
              name: '材质',
              type: 'pie',
              radius: '50%', // 改为饼图，去掉环形图的内外半径设置
              avoidLabelOverlap: true,
              label: {
                show: true,
                position: 'outside', // 将标签位置设置为外部
                color: 'white',
                formatter: '{b} {d}%'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 12,
                  fontWeight: 'bold',
                  color: 'white'
                }
              },
              labelLine: {
                show: true,
              },
              data: echartsData
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
        // 监听窗口大小变化，以调整图表大小
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
    },
    handleSelectChange() {
      // 获取选中的值
      const index = this.value;
      const urls = [
        jsonData1,
        jsonData2,
        jsonData3,
        jsonData4
      ];
      let data = urls[index]

      // 打印索引

      if (data.features && data.features.length > 0) {
        // 创建一个对象来存储每种材质的数量
        var materialCounts = {};
        // 遍历数据，统计每种材质的数量
        data.features.forEach(item => {
          var material = item.properties['材质'];
          if (material in materialCounts) {
            materialCounts[material]++;
          } else {
            materialCounts[material] = 1;
          }
        });
        // 将统计结果转换成ECharts需要的数据格式
        var echartsData = Object.keys(materialCounts).map(material => ({
          value: materialCounts[material],
          name: material
        }));
        // 初始化ECharts实例
        var myChart = echarts.init(document.querySelector("#echarts_4"));
        // 指定图表的配置项和数据
        var option = {
          tooltip: {
            trigger: 'item',
            textStyle: {
              color: 'white'
            }
          },
          series: [
            {
              name: '材质',
              type: 'pie',
              radius: '50%', // 改为饼图，去掉环形图的内外半径设置
              avoidLabelOverlap: true,
              label: {
                show: true,
                position: 'outside', // 将标签位置设置为外部
                color: 'white',
                formatter: '{b} {d}%'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 12,
                  fontWeight: 'bold',
                  color: 'white'
                }
              },
              labelLine: {
                show: true,
              },
              data: echartsData
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
        // 监听窗口大小变化，以调整图表大小
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }


    }
  },
  watch: {},
  computed: {},
  beforeDestroy() {

  },
}
</script>
<style scoped>
.main-chartFour {
  position: relative;
  height: 100%;
  width: 100%;
}

.txt_btm {
  position: relative;
  height: 100%;
  width: 100%;
}

#mySelect2 {
  position: absolute;
  top: -0.3rem;
  right: 0.2rem;
}

select {
  outline: none;
  width: 1.5rem;
  background: #1b515e;
  color: #fff;
  height: 0.25rem;
  border: 1px solid #1db9ee;
  cursor: pointer;
  font-size: .20rem;
}
</style>
